<template>
  <div class="app-container Document-container nohead">
    <el-tabs tab-position="left" style="height: 100%" v-model="activeTab">
      <el-tab-pane name="allPanel">
        <span slot="label"
          ><i class="icon-ym icon-ym-extend-folder-open"></i>全部文档</span
        >
        <div class="main JADP-flex-main">
          <div class="JADP-common-head">
            <el-breadcrumb>
              <el-breadcrumb-item v-if="levelList.length > 1">
                <a
                  @click="
                    jump(levelList[levelList.length - 2], levelList.length - 2)
                  "
                  >返回上一级</a
                >
              </el-breadcrumb-item>
              <el-breadcrumb-item v-for="(item, i) in levelList" :key="i">
                <span v-if="i + 1 >= levelList.length">{{
                  item.fullName
                }}</span>
                <a v-else @click="jump(item, i)">{{ item.fullName }}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row class="JADP-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="关键词">
                  <el-input
                    v-model="keyword"
                    placeholder="请输入关键词查询"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()"
                  >
                    {{ $t("common.search") }}</el-button
                  >
                  <el-button icon="el-icon-refresh-right" @click="reset()"
                    >{{ $t("common.reset") }}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
            <div class="JADP-common-search-box-right">
              <el-button @click="addFolder()" style="margin-right: 10px"
                >新建文件夹</el-button
              >
              <!-- <el-upload
                :action="uploadUrl"
                :headers="uploadHeaders"
                :on-success="handleSuccess"
                :data="{ parentId: parentId }"
                multiple
                :show-file-list="false"
                class="upload-box"
                :before-upload="beforeUpload"
              > -->
              <el-button
                type="primary"
                icon="el-icon-upload2"
                :loading="receiveing"
                @click="$refs.uploadFile.dialogTableVisible = true"
                >上传文件
              </el-button>
              <!-- </el-upload> -->
            </div>
          </el-row>
          <JADP-table
            v-loading="listLoading"
            :data="list"
            empty-text="该文件夹为空"
            size="mini"
          >
            <el-table-column label="文件名">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.type"
                  @click="readInfo(scope.row.fullName)"
                  class="cursor-pointer"
                >
                  <i
                    :class="
                      'icon-ym ' +
                        toFileExt(scope.row.fileExtension) +
                        ' i-default'
                    "
                  />
                  {{ scope.row.fullName }}
                </span>
                <span
                  class="cursor-pointer"
                  v-else
                  @click="openFolder(scope.row)"
                >
                  <i class="icon-ym icon-ym-extend-folder text-warning" />
                  {{ scope.row.fullName }}
                </span>
              </template>
            </el-table-column>

            <el-table-column label="文件格式" prop="fileExtension">
            </el-table-column>

            <el-table-column prop="fileSize" label="大小" width="90">
              <template slot-scope="scope">{{
                scope.row.fileSize | toFileSize()
              }}</template>
            </el-table-column>

            <!-- <el-table-column label="共享" width="50">
              <template slot-scope="scope">
                <div v-if="scope.row.type">
                  <span v-if="scope.row.isShare"
                    ><i
                      class="icon-ym icon-ym-extend-thumbs-up i-default"
                      style="color: #13ce66 !important"
                    ></i
                  ></span>
                  <span v-else title="共享文件"
                    ><i class="icon-ym icon-ym-extend-thumbs-up i-default"></i
                  ></span>
                </div>
              </template>
            </el-table-column> -->

            <!-- <el-table-column label="版本号" prop="version">
              <template slot-scope="scope">
                <span>{{ scope.row.version }}</span>
              </template>
            </el-table-column> -->

            <el-table-column label="发布日期" prop="releaseDate">
            </el-table-column>

            <!-- <el-table-column label="评价周期（天）" prop="evaluationCycle">
              <template slot-scope="scope">
                <span>{{ scope.row.evaluationCycle }}</span>
              </template>
            </el-table-column> -->

            <!-- <el-table-column label="上传人" prop="creatorUserId">
              <template slot-scope="scope">
                <span>{{ scope.row.creatorUserId }}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="creatorTime"
              label="创建日期"
              :formatter="jadp.tableDateFormat"
            /> -->
            <el-table-column label="状态" prop="enabledMark">
              <template slot-scope="scope">
                <el-switch
                  v-if="scope.row.type"
                  :value="scope.row.enabledMark"
                  active-color="#13ce66"
                  :active-value="1"
                  :inactive-value="0"
                  inactive-color="#ff4949"
                  @change="typechange(scope.row.id, scope.row.enabledMark)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="150">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDownLoad(scope.row.id)"
                  :disabled="operationType(scope.row)"
                  v-if="scope.row.type"
                  >下载</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  class="JADP-table-delBtn"
                  @click="handleDel(scope.$index, scope.row.id)"
                  :disabled="operationType(scope.row)"
                  >删除</el-button
                >
                <el-dropdown>
                  <el-button
                    type="text"
                    size="mini"
                    :disabled="operationType(scope.row)"
                  >
                    {{ $t("common.moreBtn")
                    }}<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      @click.native="shareFolder(scope.row.id)"
                      v-if="scope.row.type"
                    >
                      共享
                    </el-dropdown-item>
                    <!-- <el-dropdown-item @click.native="getFolder(scope.row.id)"
                      >重命名
                    </el-dropdown-item> -->
                    <el-dropdown-item
                      @click.native="moveTo(scope.row.id, scope.row.parentId)"
                    >
                      移动到
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </JADP-table>
        </div>
      </el-tab-pane>
      <!--  <el-tab-pane name="shareoutPanel">
        <span slot="label"
          ><i class="icon-ym icon-ym-extend-thumbs-up"></i>我的共享</span
        >
        <div class="main JADP-flex-main">
          <div class="JADP-common-head">
            <el-breadcrumb>
              <el-breadcrumb-item>我的共享</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row class="JADP-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="文件名">
                  <el-input
                    v-model="keyword"
                    placeholder="搜索我的文件"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()"
                  >
                    {{ $t("common.search") }}</el-button
                  >
                  <el-button icon="el-icon-refresh-right" @click="reset()"
                    >{{ $t("common.reset") }}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <JADP-table
            v-loading="listLoading"
            :data="list"
            empty-text="该文件夹为空"
            size="mini"
          >
            <el-table-column label="文件名">
              <template slot-scope="scope">
                <span @click="readInfo(scope.row.fullName)">
                  <i
                    :class="
                      'icon-ym ' +
                      toFileExt(scope.row.fileExtension) +
                      ' i-default'
                    "
                  />
                  {{ scope.row.fullName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="fileSize" label="大小" width="90">
              <template slot-scope="scope">{{
                scope.row.fileSize | toFileSize()
              }}</template>
            </el-table-column>
            <el-table-column
              prop="shareTime"
              label="共享日期"
              :formatter="jadp.tableDateFormat"
              width="120"
            />
            <el-table-column label="操作" fixed="right" width="70">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  class="JADP-table-delBtn"
                  @click="unshare(scope.$index, scope.row.id)"
                  >取消共享</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="版本号" prop="version">
              <template slot-scope="scope">
                <span>{{ scope.row.version }}</span>
              </template>
            </el-table-column>

            <el-table-column label="发布日期" prop="releaseDate">
              <template slot-scope="scope">
               <span>{{
                  dayjs(scope.row.releaseDate).format("YYYY-MM-DD")
                }}</span>
                <span>{{ scope.row.releaseDate }}</span>
              </template>
            </el-table-column>

            <el-table-column label="评价周期（天）" prop="evaluationCycle">
              <template slot-scope="scope">
                <span>{{ scope.row.evaluationCycle }}</span>
              </template>
            </el-table-column>
          </JADP-table>
        </div>
      </el-tab-pane>
      <el-tab-pane name="sharetomePanel">
        <span slot="label"
          ><i class="icon-ym icon-ym-extend-share"></i>共享给我</span
        >
        <div class="main JADP-flex-main">
          <div class="JADP-common-head">
            <el-breadcrumb>
              <el-breadcrumb-item>共享给我</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row class="JADP-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="文件名">
                  <el-input
                    v-model="keyword"
                    placeholder="搜索我的文件"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()"
                  >
                    {{ $t("common.search") }}</el-button
                  >
                  <el-button icon="el-icon-refresh-right" @click="reset()"
                    >{{ $t("common.reset") }}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <JADP-table
            v-loading="listLoading"
            :data="list"
            empty-text="该文件夹为空"
            size="mini"
          >
            <el-table-column label="文件名">
              <template slot-scope="scope">
                <span @click="readInfo(scope.row.fullName)">
                  <i
                    :class="
                      'icon-ym ' +
                      toFileExt(scope.row.fileExtension) +
                      ' i-default'
                    "
                  />
                  {{ scope.row.fullName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="fileSize" label="大小" width="90">
              <template slot-scope="scope">{{
                scope.row.fileSize | toFileSize()
              }}</template>
            </el-table-column>
            <el-table-column label="版本号" prop="version">
              <template slot-scope="scope">
                <span>{{ scope.row.version }}</span>
              </template>
            </el-table-column>

            <el-table-column label="发布日期" prop="releaseDate">
              <template slot-scope="scope">
                <span>{{
                  dayjs(scope.row.releaseDate).format("YYYY-MM-DD")
                }}</span>
              </template>
            </el-table-column>

            <el-table-column label="评价周期（天）" prop="evaluationCycle">
              <template slot-scope="scope">
                <span>{{ scope.row.evaluationCycle }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="shareTime"
              label="共享日期"
              :formatter="jadp.tableDateFormat"
              width="120"
            />
            <el-table-column
              label="共享人员"
              width="120"
              prop="creatorUserId"
            />
            <el-table-column label="操作" fixed="right" width="50">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDownLoad(scope.row.id)"
                  >下载
                </el-button>
              </template>
            </el-table-column>
          </JADP-table>
        </div>
      </el-tab-pane> -->
      <el-tab-pane name="trashPanel">
        <span slot="label"
          ><i class="icon-ym icon-ym-extend-trash"></i>回收站</span
        >
        <div class="main JADP-flex-main">
          <div class="JADP-common-head">
            <el-breadcrumb>
              <el-breadcrumb-item>回收站</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-row class="JADP-common-search-box" :gutter="16">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="文件名">
                  <el-input
                    v-model="keyword"
                    placeholder="搜索我的文件"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()"
                  >
                    {{ $t("common.search") }}</el-button
                  >
                  <el-button icon="el-icon-refresh-right" @click="reset()"
                    >{{ $t("common.reset") }}
                  </el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <JADP-table
            v-loading="listLoading"
            :data="list"
            empty-text="该文件夹为空"
            size="mini"
          >
            <el-table-column label="文件名">
              <template slot-scope="scope">
                <span
                  v-if="scope.row.type"
                  @click="readInfo(scope.row.fullName)"
                >
                  <i
                    :class="
                      'icon-ym ' +
                        toFileExt(scope.row.fileExtension) +
                        ' i-default'
                    "
                  />
                  {{ scope.row.fullName }}
                </span>
                <span v-else>
                  <i class="icon-ym icon-ym-extend-folder text-warning" />
                  {{ scope.row.fullName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="fileSize" label="大小" width="90">
              <template slot-scope="scope">{{
                scope.row.fileSize | toFileSize()
              }}</template>
            </el-table-column>
            <el-table-column
              prop="deleteTime"
              label="删除日期"
              :formatter="jadp.tableDateFormat"
              width="150"
            />
            <el-table-column
              label="版本号"
              prop="version"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.version }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="发布日期"
              prop="releaseDate"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.releaseDate }}</span>
              </template>
            </el-table-column>

            <el-table-column label="评价周期（天）" prop="evaluationCycle">
              <template slot-scope="scope">
                <span>{{ scope.row.evaluationCycle }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="recovery(scope.$index, scope.row.id)"
                >
                  还原</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  class="JADP-table-delBtn"
                  @click="trashDel(scope.$index, scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </JADP-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <Detail
      v-show="detailVisible"
      ref="detail"
      @close="detailVisible = false"
    />
    <userBox v-if="userBoxVisible" ref="userBox" @refresh="refresh" />
    <folderTree v-if="folderTreeVisible" ref="folderTree" @refresh="initData" />
    <!-- 文件上传弹出框 -->
    <upload-file
      ref="uploadFile"
      :parentId="parentId"
      :fullName="fullName"
      @receiveing="receiveing = $event"
      @reset="reset"
      @initData="initData"
    />
  </div>
</template>

<script>
import uploadFile from "./components/UploadFile";
import {
  AllList, //渲染页面
  Create,
  Delete,
  Download,
  FgDocumentInfo,
  ShareCancel,
  ShareOutList,
  ShareTomeList,
  TrashDelete,
  TrashList,
  TrashRecovery,
  Update,
  updateStatus
} from "@/api/extend/documentFg";
import userBox from "./UserBox";
import folderTree from "./FolderTree";
import Detail from "./Detail";
export default {
  name: "extend-documentFg",
  components: {
    userBox,
    folderTree,
    uploadFile,
    Detail
  },
  data() {
    return {
      dialogVisible: false,
      receiveing: false,
      userBoxVisible: false,
      folderTreeVisible: false,
      detailVisible: false,
      activeTab: "allPanel",
      keyword: "",
      parentId: "0",
      listLoading: true,
      list: [],
      levelList: [
        {
          id: "0",
          fullName: "全部文档"
        }
      ],
      activeTabs: "yozoOnlinePreview",
      detailVisible: false,
      fullName: "全部文档"
    };
  },
  computed: {
    //操作状态
    operationType() {
      return function(val) {
        if (val.type === 1) {
          //判断当前类型是否文件类型
          if (val.enabledMark === 1) {
            // 判断当前状态
            return false;
          } else {
            return true;
          }
        } else {
          if (val.enabledMark === 1) {
            return true;
          } else {
            return false;
          }
        }
      };
    },
    myType() {
      return function(val) {
        return val == 0 ? false : true;
      };
    }
  },
  watch: {
    activeTab(val) {
      if (val === "allPanel") {
        this.levelList = [
          {
            id: "0",
            fullName: "全部文档"
          }
        ];
        this.parentId = "0";
      }
      this.reset();
    }
  },
  created() {
    this.initData();
  },
  methods: {
    //修改状态
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    stateSwitchBtn() {
      this.stateSwitch = false;
    },
    readInfo(name) {
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.detail.init(name);
      });
    },
    reset() {
      this.list = [];
      this.keyword = "";
      this.initData();
    },
    initData() {
      this.listLoading = true;
      let data = { keyword: this.keyword };
      if (this.activeTab === "allPanel") {
        data = { ...data, parentId: this.parentId ,organizeId:this.$store.getters.organizeId };
        AllList(data).then(res => {
          this.list = res.data.list;

          this.listLoading = false;
        });
      }
      if (this.activeTab === "shareoutPanel") {
        ShareOutList(data).then(res => {
          this.list = res.data.list;
          this.listLoading = false;
        });
      }
      if (this.activeTab === "sharetomePanel") {
        ShareTomeList(data).then(res => {
          this.list = res.data.list;
          this.listLoading = false;
        });
      }
      if (this.activeTab === "trashPanel") {
        TrashList(data).then(res => {
          this.list = res.data.list;
          this.listLoading = false;
        });
      }
    },
    search() {
      this.initData();
    },
    handleDel(index, id) {
      this.$confirm("您确定要把所选文件放入回收站, 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          Delete(id,this.$store.getters.organizeId).then(res => {
            this.list.splice(index, 1);
            this.$message({
              type: "success",
              message: res.msg
            });
          });
        })
        .catch(() => {});
    },
    unshare(index, id) {
      this.$confirm("您确定要取消共享, 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          ShareCancel(id,this.$store.getters.organizeId).then(res => {
            this.list.splice(index, 1);
            this.$message({
              type: "success",
              message: res.msg
            });
          });
        })
        .catch(() => {});
    },
    recovery(index, id) {
      this.$confirm("您确定要还原选中的文件?", "提示", {
        type: "warning"
      })
        .then(() => {
          TrashRecovery(id,this.$store.getters.organizeId).then(res => {
            this.list.splice(index, 1);
            this.$message({
              type: "success",
              message: res.msg
            });
          });
        })
        .catch(() => {});
    },
    trashDel(index, id) {
      this.$confirm(
        "文件删除后将无法恢复，您确定要彻底删除所选文件吗?",
        "提示",
        {
          type: "warning"
        }
      )
        .then(() => {
          TrashDelete(id,this.$store.getters.organizeId).then(res => {
            this.list.splice(index, 1);
            this.$message({
              type: "success",
              message: res.msg
            });
          });
        })
        .catch(() => {});
    },
    moveTo(id, parentId) {
      this.folderTreeVisible = true;
      this.$nextTick(() => {
        this.$refs.folderTree.init(id, parentId);
      });
    },
    shareFolder(id) {
      this.userBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.userBox.init(id);
      });
    },
    getFolder(id) {
      FgDocumentInfo(id,this.$store.getters.organizeId).then(res => {
        this.addFolder(res.data);
      });
    },
    // 新建文件夹事件
    addFolder(info) {
      let inputValue = "";
      if (info) {
        inputValue = info.fullName;
      }
      let title = info
        ? info.type
          ? "重命名文件"
          : "重命名文件夹"
        : "新建文件夹";
      this.$prompt("", title, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "输入名称",
        // inputErrorMessage: "请正确输入文件夹名称",
        // // inputValue: inputValue,
        // inputPattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,
        closeOnClickModal: false
      })
        .then(({ value }) => {
          let data = {
            type: info && info.type ? info.type : "0",
            parentId: this.parentId,
            fullName: value,
            organizeId:this.$store.getters.organizeId
          };
          if (info && info.id) {
            Object.assign(data, { id: info.id });
            Update(data).then(res => {
              this.$message({
                type: "success",
                message: res.msg
              });
              this.initData();
            });
          } else {
            Create(data).then(res => {
              this.$message({
                type: "success",
                message: res.msg
              });
              this.initData();
            });
          }
        })
        .catch(() => {});
    },
    refresh(isrRefresh) {
      this.userBoxVisible = false;
      if (isrRefresh) this.initData();
    },
    // 下载文件
    handleDownLoad(id) {
      Download(id,this.$store.getters.organizeId).then(res => {
        window.location.href = this.define.comUrl + res.data.url;
      });
    },
    // 打开文件夹
    openFolder(item) {
      this.parentId = item.id;
      this.fullName = item.fullName;
      this.levelList.push(item);
      this.reset();
    },
    jump(item, i) {
      this.parentId = item.id;
      this.fullName = item.fullName;
      this.reset();
      this.levelList = this.levelList.slice(0, i + 1);
    },
    toFileExt(ext) {
      if (ext) ext = ext.replace(".", "");
      if (ext == "doc" || ext == "docx") {
        return "icon-ym-file-word";
      }
      if (ext == "xls" || ext == "xlsx") {
        return "icon-ym-file-excel";
      }
      if (ext == "ppt" || ext == "pptx") {
        return "icon-ym-file-ppt";
      }
      if (ext == "rar" || ext == "zip") {
        return "icon-ym-file-zip";
      }
      if (ext == "txt" || ext == "log") {
        return "icon-ym-file-text";
      }
      if (ext == "html" || ext == "cs" || ext == "xml") {
        return "icon-ym-file-code";
      }
      if (
        ext == "gif" ||
        ext == "jpg" ||
        ext == "jpeg" ||
        ext == "bmp" ||
        ext == "png"
      ) {
        return "icon-ym-file-image1";
      }
      if (ext == "pdf") {
        return "icon-ym-file-pdf";
      }
      if (ext == "mp3") {
        return "icon-ym-file-audio";
      }
      if (ext == "mp4") {
        return "icon-ym-file-movie";
      }
      return "icon-ym-file-blank";
    },
    //状态发生更改的事件
    typechange(id, val) {
      let index = this.list.findIndex(item => item.id === id);
      this.$confirm("此操作将修改数据状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.list[index].enabledMark =
            this.list[index].enabledMark === 1 ? 0 : 1;
          let type = this.list[index].enabledMark;
          updateStatus(id, type,this.$store.getters.organizeId).then(res => {
            this.$message({
              type: "success",
              message: "修改成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作"
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.Document-container {
  position: relative;
  .JADP-common-search-box {
    margin-bottom: 0;
    padding-left: 0;
  }
  .JADP-common-head {
    padding: 14px 0 10px;
  }
  >>> .el-tabs__item {
    text-align: left !important;
    width: 160px;
    .icon-ym {
      font-size: 14px;
      margin-right: 8px;
    }
  }
  >>> .el-tabs__content {
    height: 100%;
    .el-tab-pane {
      height: 100%;
      overflow: hidden;
    }
  }
  .main {
    height: 100%;
    .icon-ym {
      font-size: 14px;
    }
    .cursor-pointer {
      cursor: pointer;
    }
  }
  .upload-demo {
    display: inline-block;
  }
}
</style>
